<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="wap-font-scale" content="no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="format-detection" content="telephone=no,email=no,address=no,date=no" />
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/public.css">
</head>
<body>
    <div class="top_fixed">
        <!--头部返回与标题-->
        <header id="top_back" class="txt_center">
            <a onclick="javascript:window.history.back(-1)" class="back_btn"></a>
            <h3 class="tableBox">修改密码</h3>
        </header>
    </div>
    <div style="height:1.6rem"></div>
    <!-- section 主体 -->
    <section class="wrap txt_center">
        <p class="safe_city">修改密码</p>
        <div id="txtPart">
            <form action="">
                <dl class="over_hide clearfix">
                    <dt class="fl">
                        <i class="bg_eq person"></i>
                    </dt>
                    <dd class="fl">
                        <input 
                               type="text" 
                               name=""
                               placeholder="输入手机号码"
                               maxlength="11" 
                               class="formInput"
                               id="mobile"
                               data-error="手机号码格式不正确"
                               data-empty="请输入手机号码"
                               data-reg="^1(3|4|5|7|8)\d{9}$"
                               data-correct="输入手机号码"
                        >
                    </dd>
                </dl>
                <div id="codeBox" class="clearfix">
                    <dl class="over_hide clearfix codeBox  fl">
                        <dt class="fl">
                            <i class="bg_eq codes"></i>
                        </dt>
                        <dd class="fl">
                            <input 
                                    type="text" 
                                    name=""
                                    readonly 
                                    maxlength="4"
                                    placeholder="验证码" 
                                    id="codes"
                                    class="formInput"
                                    data-reg="^[0-9]{4}"
                                    data-error="验证码格式错误"
                                    data-correct="验证码"
                                >
                        </dd>
                    </dl>
                    <button class="fr" type="button" disabled=true  id="get_code">获取验证码</button>
                </div>
                <dl class="over_hide clearfix">
                    <dt class="fl">
                        <i class="bg_eq key"></i>
                    </dt>
                    <dd class="fl">
                        <a href="javascript:;" class="pass_eye"><em class="bg_eq  pCenter"></em></a>
                        <input
                                type="password"
                                placeholder="原密码"
                                class="formInput  pass_mode"
                                maxlength="16"
                                data-reg="^[A-Za-z0-9]{8,16}$"
                                data-error="密码格式不正确"
                                data-empty="请输入密码"
                                data-correct="原密码"
                        >
                        <span class="warn_style hide" style="right:1.5rem;"></span>
                    </dd>
                </dl>
                <dl class="over_hide clearfix">
                    <dt class="fl">
                        <i class="bg_eq key"></i>
                    </dt>
                    <dd class="fl">
                        <a href="javascript:;" class="pass_eye"><em class="bg_eq  pCenter"></em></a>
                        <input 
                                type="password"  
                                placeholder="设置新密码"
                                class="formInput  pass_mode"
                                maxlength="16" 
                                data-reg="^[A-Za-z0-9]{8,16}$"
                                data-error="密码格式不正确"
                                data-empty="请输入密码"
                                data-correct="设置新密码"
                            >
                        <span class="warn_style hide" style="right:1.5rem;"></span>
                    </dd>
                </dl>
                <p class="info">
                    密码格式：长度在8~16位之间，数字，大写字母，<br>小写字母组成
                </p>
                <button type="button" class="public_button  block" id="reset_pass" disabled>设置新密码</button>
            </form>
        </div>
    </section>

    <!-- 忘记密码模态框 -->
     <section class="model hide"  id="forgetPassModal">
        <div class="boxCont pCenter txt_center">
            <h3>输入验证码</h3>
            <dl>
                <dt class="txt_block">
                    <input
                            type="text"
                            id="random_code"
                            class="formInput"
                            value=""
                            placeholder="输入验证码"
                            data-empty="验证码不能为空"
                            data-overtime="验证码输入超时"
                            data-error="验证码输入有误"
                            data-correct="输入验证码"
                            name=""
                            maxlength="4"
                        >
                </dt>
                <dd class="txt_block" id="code_img">
                    <img src="" alt="" class="eq_resize" id="codeImg">
                </dd>
            </dl>
            <p class="sureBtn txt_center">确定</p>
            <a href="javascript:;" class="closed_btn"></a>
        </div>
    </section>

</body>
</html>
<script src="../../common/script/phoneSize.js"></script>
<script src="../../common/script/jquery-1.11.2.js"></script>
<script src="../../common/script/public.js"></script>
<script>
    //忘记密码--------重新设置密码
    (function(){
        function SetPassWord(){};
        SetPassWord.prototype={
            //初始化调用
            init:function(opts){
                this.smsTPL=opts.smsTPL;//短信编码
                this.opts={
                    getCodeBtn:opts.getCodeBtn,//获取验证码按钮
                    formInput:opts.formInput,//表单集合
                    mobileText:opts.formText.mobileText,//手机号码
                    codeText:opts.formText.codeText,//短信验证码
                    passText:opts.formText.passText,//密码框
                    resetBtn:opts.resetBtn,//重置按钮
                    eyeBtn:opts.eyeShow,//密码眼睛
                    codeImg:opts.model.codeImg,//图片验证码
                    modal:opts.model.modal,//模态框
                    modalSure:opts.model.sureBtn,//模态框确定按钮
                    modalCancel:opts.model.cancelBtn,//模态框关闭按钮,
                    imgTextBox:opts.model.imgTextBox//图像验证码文本框
                };                

                //启用重置按钮
                this.formStatus(
                    this.opts.formInput,
                    this.opts.resetBtn,
                    this.opts.codeText,
                    this.opts.passText,
                    this.opts.mobileText
                );
                //公共方法，密码的显示与隐藏----------------------
                oPublic.eyesPassWord(this.opts.eyeBtn,this.opts.passText);


                //公共方法  手机格式正确激活获取验证码按钮----------------------------------
                oPublic.mobileReg(this.opts.mobileText,this.opts.getCodeBtn);


                //公共方法错误样式样式清楚-----------------------------------
                oPublic.focusCancel(this.opts.formInput);

                //公共方法,弹窗事件----------------------------------
                oPublic.picAlertbox(
                        this.opts.getCodeBtn,
                        this.opts.modalCancel,
                        this.opts.modalSure,
                        this.opts.codeImg,
                        this.opts.mobileText,
                        this.opts.modal,
                        this.opts.codeText,
                        this.opts.imgTextBox,
                        this.smsTPL
                );

                //更改密码-------------------------------
                this.alterPass(this.opts.resetBtn,this.opts.formInput);

            },
            formStatus:function(opts,btns,codeText,password,mobileText){
                //键盘抬起判断字数-----------------------
                $(opts).keyup(function(){
                    var codeTextValue=$(codeText).val();
                    var passLen=$(password).val();
                    var telephone=$(mobileText).val();
                    if(codeTextValue.length==4){
                        if(passLen.length>=8&&passLen.length<=16&&telephone.length==11){
                            $(btns).attr("disabled",false).addClass("active_status");
                        }else{
                            $(btns).attr("disabled",true).removeClass("active_status");
                        }
                    }else{
                        $(btns).attr("disabled",true).removeClass("active_status"); 
                    }
                })
            },
            //更改提交密码
            alterPass:function(resetPassBtn,formInput,handle){
                var self=this;
                $(resetPassBtn).on("click",function(){
                    //循环判断正则  模板【data-】-----------------------------------
                    var flag=true;
                    $(formInput).each(function(){
                        var oValue=$(this).val();
                        var errorMsg=$(this).attr("data-error");
                        var regStr=$(this).attr("data-reg");
                        var reg=new RegExp(regStr);//正则匹配
                        if(reg&&!reg.test(oValue)){
                           oPublic.errorText($(this),errorMsg,"warn","dl",".pass_eye em");
                           flag=false;
                           return;
                        }
                    });
                    if(flag){
                        handle&&handle();
                    }
                });
            }
        };
        window.setPassWord=new SetPassWord();
    })();


    //初始化参数配置------------------------------------
    setPassWord.init({
        getCodeBtn:"#get_code",
        formInput:".formInput",
        formText:{
             mobileText:"#mobile",
             codeText:"#codes",
             passText:".pass_mode"
        },
        resetBtn:"#reset_pass",//密码重置
        eyeShow:".pass_eye",//密码眼睛
        model:{ //模态框
                modal:"#forgetPassModal",
                sureBtn:".sureBtn",
                cancelBtn:".closed_btn",
                codeImg:"#codeImg",//验证码图片
                imgTextBox:"#random_code"//图片随机验证码
        },
        smsTPL:oPublic.OWNER_RETRIEVE_PASSWORD_GPS,//短信模板编码
        alterPass:function(){

        }
    });


   

</script>
